<html>
<head>
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../lib/bootstrap3/css/dashboard.css">
    <script src="../../lib/angularjs/angular1.6.3.min.js"></script>
    <script src="../../lib/angularjs/angular-ui-route/angular-ui-routerv1.0.0-alpha.4.js"></script>
    <script src="../../lib/angularjs/angular-ui-route/ui-router-visualizer@1.1.3.js"></script>
    <!--<script src="../../lib/angularjs/angular-ui-route/show-current-browser-url@1.0.7.js"></script>
    <script src="../../lib/angularjs/angular-ui-route/d3@3.5.17.js"  charset="UTF-8"></script>-->

</head>
<body ng-app="hellosolarsystem">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<a ui-sref="people" ui-sref-active="active">People</a>
<ui-view></ui-view>
</body>
<script>
    var myApp = angular.module('hellosolarsystem', ['ui.router', 'ui.router.visualizer']);
    myApp.config(function($stateProvider) {
        // An array of state definitions
        var states = [
            {
                name: 'hello', url: '/hello',
                // Using component: instead of template:
                component: 'hello'
            }, {
                name: 'about', url: '/about', component: 'about'
            }, {
                name: 'people', url: '/people', component: 'people',
                // This state defines a 'people' resolve
                // It delegates to the PeopleService to HTTP fetch (async)
                // The people component receives this via its `bindings: `
                resolve: {
                    people: function(PeopleService) {
                        return PeopleService.getAllPeople();
                    }
                }
            }, {
                name: 'person',
                // This state takes a URL parameter called personId
                url: '/people/{personId}', component: 'person',
                // This state defines a 'person' resolve
                // It delegates to the PeopleService, passing the personId parameter
                resolve: {
                    person: function(PeopleService, $transition$) {
                        return PeopleService.getPerson($transition$.params().personId);
                    }
                }
            }
        ]
        // Loop over the state definitions and register them
        states.forEach(function(state) {
            $stateProvider.state(state);
        });
    });
    // To account for plunker embeds timing out, preload the async data
    myApp.run(function($http) {
        $http.get('people.json', { cache: true });
    });
</script>
<script>
    angular.module('hellosolarsystem').service('PeopleService', function($http) {
        var service = {
            getAllPeople: function() {
                return $http.get('people.json', { cache: true }).then(function(resp) {
                    return resp.data;
                });
                return null;
            },
            getPerson: function(id) {
                function personMatchesParam(person) {
                    return person.id === id;
                }
                return service.getAllPeople().then(function (people) {
                    return people.find(personMatchesParam)
                });
            }
        }
        return service;
    })
</script>
<script>
    angular.module('hellosolarsystem').component('hello', {
        template:  '<h3>{{$ctrl.greeting}} solar sytem!</h3>' +
        '<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',
        controller: function() {
            this.greeting = 'hello';
            this.toggleGreeting = function() {
                this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
            }
        }
    })
</script>
<script>
    angular.module('hellosolarsystem').component('about', {
        template:  '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
    })
</script>
<script>
    angular.module('hellosolarsystem').component('people', {
        bindings: { people: '<' },
        template: '<h3>Some people:</h3>' +
        '<ul>' +
        '  <li ng-repeat="person in $ctrl.people">' +
        '    <a ui-sref="person({ personId: person.id })">' +
        '      {{person.name}}' +
        '    </a>' +
        '  </li>' +
        '</ul>'
    })
</script>
<script>
    angular.module('hellosolarsystem').component('person', {
        bindings: { person: '<' },
        template: '<h3>A person!</h3>' +
        '<div>Name: {{$ctrl.person.name}}</div>' +
        '<div>Id: {{$ctrl.person.id}}</div>' +
        '<div>Company: {{$ctrl.person.company}}</div>' +
        '<div>Email: {{$ctrl.person.email}}</div>' +
        '<div>Address: {{$ctrl.person.address}}</div>' +
        '<button ui-sref="people">Close</button>'
    });
</script>
</html>